<template>
  <el-card>
    <!-- 添加按钮 -->
    <el-button type="primary"
     icon="el-icon-plus"
     style="margin: 10px 0px;"
     @click="showDialog"
     >添加</el-button>
    <!-- 表格 -->
    <el-table
    :data="list"
    border
    style="width: 100%; margin-bottom: 20px;">
    <el-table-column
      type="index"
      label="序号"
      align="center"
      width="80">
    </el-table-column>
    <el-table-column
      prop="tmName"
      align="center"
      label="品牌名称">
    </el-table-column>
    <el-table-column
      prop="logoUrl"
      align="center"
      label="品牌logo">
      <template v-slot="{row}">
        <img :src="row.logoUrl" alt="" style="height: 100px;">
      </template>
    </el-table-column>
    <el-table-column
      prop="option"
      label="操作">
      <template slot-scope="{ row, $index }">
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="updateTradeMark(row)"
            ></el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteTradeMark(row)"
            ></el-button
          >
        </template>
    </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog
      :title="tmForm.id?'修改品牌':'添加品牌'"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form style="width: 80%;" :model="tmForm" :rules="rules" ref="ruleForm">
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input autocomplete="off" v-model="tmForm.tmName"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload_tip">
              只能上传jpg/png文件，且不超过2Mb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTrademark">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页器 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
import {getTrademarkListApi,addTrademarkApi,delTrademarkListApi} from '@/api/trademark'
export default {
  name: "trademark",
  data() {
    // 自定义校验规则
    var validateTmName = (rule,value,callback)=>{
      if(value.length < 2 || value.length > 10){
        callback(new Error("品牌名称2-10位"))
      }else {
        callback()
      }
    }
      return {
        page: 1,
        limit: 3,
        total: 0,
        list: [],
        dialogVisible: false,
        tmForm:{
          tmName: "",
          logoUrl: "",
        },
        // 表单校验规则
        rules: {
          // 品牌名校验
          tmName:[
            {required: true,message:"请输入品牌名称",trigger:"blur"},
            {validator:validateTmName,trigger:"change"},
          ],
          // logo校验
          logoUrl:[{required:true,message:"请选择品牌图片"}],
        }
      }
    },
  mounted() {
    this.getTrademarkList()
  },
  methods: {
    // 获取品牌数据
    async getTrademarkList() {
      const res = await getTrademarkListApi(this.page,this.limit)
      this.list = res.data.records
      this.total = res.data.total
    },
    // 更改展示条数
    handleSizeChange(limit){
      this.limit = limit
      this.getTrademarkList()
    },
    // 实现翻页效果
    handleCurrentChange(page){
      this.page = page
      this.getTrademarkList()
    },
    // 添加品牌按钮
    showDialog(){
      // 展示对话框
      this.dialogVisible = true
      // 清除数据
      this.tmForm = {tmName:"",logoUrl:""}
    },
    // 编辑品牌数据
    updateTradeMark(row){
      this.dialogVisible = true
      this.tmForm = {...row}
    },
    // 图片上传成功
    handleAvatarSuccess(res,file){
      this.tmForm.logoUrl = res.data
    },
    // 图片上传前校验
    beforeAvatarUpload(file){
      const img = file.type === "image/jpg"
      const img2M = file.size / 1024 / 1024 < 2

      if(!img){
        this.$message.error("上传头像格式为jpg/png")
      }
      if(!img2M){
        this.$message.error("上传头像图片不能超过2MB")
      }
      return img && img2M
    },
    // 添加品牌数据
    addTrademark(){
      this.$refs.ruleForm.validate(async(success)=>{
        if(success){
          this.dialogVisible = false
          // 发请求修改
          let result = await addTrademarkApi(this.tmForm)
          if(result.code == 200){
            this.$message({
              type:"success",
              message: this.tmForm.id ? "修改品牌成功":"添加品牌成功",
            })
            this.getTrademarkList(this.tmForm.id?this.page:1)
          }
        }else{
          console.log("error submit");
          return false
        }
      })
    },
    // 删除品牌
    deleteTradeMark(row){
      //弹框
      this.$confirm(`确定要删除${row.tmName}吗?`,"提示",{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
      })
      .then(async()=>{
        // 点击确定发送请求，删除
        const result = await delTrademarkListApi(row.id)
        if(result.code == 200){
          this.$message({
            type: "success",
            message:"删除成功！"
          })
          this.getTrademarkList(this.list.length>1?this.page:this.page-1)
        }
      })
    }
  },
  
};
</script>


<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>